<template>
  <div>
    <el-upload
      style="margin: 20px"
      class="upload-demo"
      :action="uploadPath"
      multiple
      name="excel"
      :show-file-list="false"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="1"
    >
      <el-button size="small" type="primary">
        <i class="el-icon-upload el-icon--right"></i>
        导入Excel
      </el-button>
    </el-upload>

    <el-button
      size="small"
      type="primary"
      @click="handleExportDicts"
      style="margin-left: 20px"
    >
      <i class="el-icon-upload el-icon--right"></i>
      导出Excel
    </el-button>
    <br />
    <!-- 数据字典表格展示 
        后端准备数据集合：
          如果一个数据有子节点，那么给他设置hasChildren属性的值为true，否则设置false

          父节点如果有子节点，那么通过异步的方式去加载子节点


          查询父节点数据，给父节点设置hasChildren属性值
    -->
    <el-table
      :data="dicts"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      lazy
      :load="load"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" sortable></el-table-column>
      <el-table-column prop="dictCode" label="编码" sortable></el-table-column>
      <el-table-column prop="value" label="值" sortable></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="更新数据字典" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="dict.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编码" :label-width="formLabelWidth">
          <el-input v-model="dict.dictCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <el-input v-model="dict.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateDict">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dictApi from '@/api/dict'
export default {
  data() {
    return {
      dict: {
        //默认name没有属性值，
        name: '',
        dictCode: '', // elementui的表单项回显数据比较时 使用的是=== 值和类型都一样
        value: 0,
      }, //初始化字典对象
      formLabelWidth: '120px',
      dialogFormVisible: false, //对话框显示状态 默认不显示
      uploadPath: 'http://192.168.1.170/admin/core/dict/import',
      dicts: [],
      updateRow: {},
    }
  },
  created() {
    this.getDictsByPid(1)
  },
  methods: {
    //对话框的提交按钮事件函数
    handleUpdateDict() {
      dictApi.update(this.dict).then((r) => {
        this.$message.success(r.message)
        //关闭对话框
        this.dialogFormVisible = false
        //刷新页面数据
        // this.getDictsByPid(1)
        // this.$router.push('/dict/import')
        window.location.reload() //重新加载当前页面：页面vue的生命周期重新执行了一次
        //查询当前节点回显的dicts数据 刷新
        // console.log(row) //row的children属性值 就是当前的更新后的列表数据
      })
    },
    //删除更新按钮组事件函数
    handleEdit(index, row) {
      console.log(row)
      //1、根据row的id查询 数据字典对象
      dictApi.getById(row.id).then((r) => {
        // console.log(r)
        //查询成功:查询到的数据中包含了parentid和id  也包含了createTime和updateTime
        this.dict.name = r.data.item.name
        this.dict.id = r.data.item.id
        this.dict.parentId = r.data.item.parentId
        this.dict.value = r.data.item.value
        this.dict.dictCode = r.data.item.dictCode
        this.updateRow = row
        //2、将数据回显到对话框中 弹出对话框
        this.dialogFormVisible = true
      })
    },
    handleDelete(index, row) {
      console.log(row)
    },

    //懒加载下一级数据字典
    load(tree, treeNode, resolve) {
      //resolve解析响应的结果 渲染到页面中生成下一级数据节点
      console.log(tree, treeNode)
      //tree代表被点击的节点对象
      //this.getDictsByPid(tree.id)  封装好的函数 查询到到子数据字典 会设置给一级数据字典变量接收
      dictApi.getDictsByPid(tree.id).then((r) => {
        resolve(r.data.items)
      })
    },
    //根据pid查询数据字典
    getDictsByPid(pid) {
      dictApi.getDictsByPid(pid).then((r) => {
        console.log(r.data.items)
        this.dicts = r.data.items
      })
    },
    //导出excel文件
    handleExportDicts() {
      //修改浏览器地址栏地址 浏览器会自动访问下载该文件
      window.location = 'http://192.168.1.170/admin/core/dict/export'
    },
    //只要上传文件响应报文的状态码为200 此函数会被回调
    handleSuccess(response, file, fileList) {
      //后端处理有异常此函数也会被调用
      if (response.code === 0) {
        // console.log(response)
        this.$message.success(response.message)
      } else {
        this.$message.error(response.message)
      }
    },
    //响应报文状态码不是200时的回调
    handleError(err, file, fileList) {
      this.$message.error('网络连接失败')
    },
  },
}
</script>
